<template>
    <div class="container">
      <!-- 对话框 -->
      <el-dialog :showClose="false" title="修改密码" v-model="dialogVisible" width="30%">
        <el-form ref="passwordForm" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input type="password" v-model="form.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="form.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="form.confirmPassword"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closePwd">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {updatePwd} from '@/api/admin';
  export default {
    name: 'UpdatePwd',
    data() {
      return {
        dialogVisible: false,
        form: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        rules: {
          password: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '新密码长度不能小于6位', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '请确认新密码', trigger: 'blur' },
            { validator: (rule, value, callback) => {
              if (value !== this.form.newPassword) {
                callback(new Error('两次输入的新密码不一致'));
              } else {
                callback();
              }
            }, trigger: 'blur' }
          ]
        },
      };
    },
    props: ['showPwd'],
    watch: {
      showPwd: {
        immediate: true,
        handler(newVal) {
          this.dialogVisible = newVal;
        }
      }
    },
    methods: {
      submitForm() {
        let subData = {
              username: localStorage.getItem('username'),
              password: this.form.oldPassword,
              newPwd: this.form.confirmPassword,
            }
            console.log(subData)
        this.$refs.passwordForm.validate((valid) => {
          if (valid) {
            updatePwd(subData).then((res)=>{
              console.log(subData)
              console.log(111111)
              // 表单验证成功，执行提交操作
              this.$message.success('密码修改成功');
              this.closePwd();
            })
          } else {
            // 表单验证失败，阻止提交
            this.$message.error('请检查输入的内容');
            return false;
          }
        });
      },
      closePwd(){
        this.dialogVisible = false;
        this.$emit('closePwd',this.dialogVisible);
      }
    }
  };
  </script>
  
  <style scoped>
  .dialog-footer {
    text-align: right;
  }
  </style>
  